<template>
  <div class="bigbox">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"> 基础信息</span>

        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="所属分类">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in getCategoryLists"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名称">
            <el-input v-model="form.spname"></el-input>
          </el-form-item>

          <el-form-item label="所属品牌">
            <el-select v-model="form.pinpai" placeholder="请选择品牌">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in getBrandLists"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品简介">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>

          <el-form-item label="商品图片">
            <el-upload
              class="avatar-uploader"
              action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
              name="good_pic"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <span>推荐图片尺寸: 750*420</span>
          </el-form-item>
          <el-form-item label="轮播图图片">
            <el-upload
              action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handlePicture"
              :headers="headers"
              name="good_pic"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>

          <el-form-item label="商品单位">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>

          <el-form-item label="商品库存">
            <el-input v-model="form.number"></el-input>
          </el-form-item>

          <el-form-item label="商品售价">
            <el-input v-model="form.price"></el-input>
          </el-form-item>

          <el-form-item label="推荐类型">
            <el-checkbox-group v-model="form.type">
              <el-checkbox
                label="新品"
                name="type"
                v-model="form.new"
              ></el-checkbox>
              <el-checkbox
                label="人气"
                name="type"
                v-model="form.people"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="上架">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>

          <el-form-item label="排序">
            <el-input v-model="form.paixu"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addFn">确认保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 富文本 -->
      <el-tab-pane label="商品详细">
         <!-- 富文本 -->
        <quill-editor
          class="editor"
          ref="myTextEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  editGoodInfo,
  getCategoryLists,
  getBrandLists,
  uploadGoodPic,
} from "../../request/httpApi";
export default {
  data() {
    return {
      form: {
        region: "",
        type: [],
        pinpai: "",
        spname: "", // 商品名称
        addarr: [], // 添加数组
        desc: "", // 商品简介
        unit: "", // 商品单位
        number: 1, // 商品库存
        price: 1, // 价格
        delivery: false, // 上架
        paixu: 1, // 排序
        new: true, // 新品
        people: true, //人气
        category_id: 1,
        brand_id: 1,
        primary_pic_url: "",
        list_pic_url: "",
      },
      dialogImageUrl: [], // 轮播图
      dialogVisible: false,
      getCategoryLists: [],
      getBrandLists: [],
      currentPage: 1, // 页数
      pageSize: 100, // 页数个数
      imageUrl: "",  // 图片
      token:'',
      headers:{
        'X-Nideshop-Token':localStorage.getItem('token')
      },

      content: null,
      contenttype: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进 // [{'direction': 'rtl'}], 
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请输入内容...", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
    };
  },
  methods: {
     handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(file);
      this.dialogVisible = true;
    },
    handlePicture(res,file){
      console.log(file);
      this.dialogImageUrl.push(file.response.data.fileUrl)
      console.log(this.dialogImageUrl);
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file);
      this.imageUrl = file.response.data.fileUrl
      // console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 添加
    addFn() {
      /* console.log(this.form.spname); // 商品名称
        console.log(this.form.desc);   // 商品简介
        console.log(this.form.unit);   // 商品单位
        console.log(this.form.number); // 商品库存
        console.log(this.form.price);   // 价格
        console.log(this.form.new);  // 新品
        console.log(this.form.people); // 人气
        console.log(this.form.delivery); // 上架
        console.log(this.form.paixu);  // 排序 */
        
      editGoodInfo({
        category_id: this.form.region,
        brand_id: this.form.pinpai,
        name: this.form.spname,
        goods_brief: this.form.desc,
        goods_unit: this.form.unit,
        goods_number: this.form.number,
        retail_price: this.form.price,
        is_new: this.form.new ? 1 : "",
        is_hot: this.form.people ? 1 : "",
        is_delete: this.form.delivery ? 0 : 1,
        sort_order: this.form.paixu,
        list_pic_url: this.imageUrl,
        // list_pic_url:"",
        gallerys: this.dialogImageUrl,
      }).then((res) => {
        console.log(11);
        console.log(res);
        /* if(res.errno===0){
          this.addarr = res.data.data
          this.addarr.unshift({name:this.form.spname,goods_brief:this.form.desc,goods_unit:this.form.unit,goods_number})
          console.log(this.addarr);
        } */
      });

      /* // 上传图片
       uploadGoodPic({
        good_pic:this.form.primary_pic_url
      }).then((res)=>{    
        console.log(res);
      }) */
    },
     // 富文本
    // 失去焦点

          onEditorBlur(editor) {},

          // 获得焦点

          onEditorFocus(editor) {},

          // 开始

          onEditorReady(editor) {},

          // 值发生变化

          onEditorChange(editor) {

            this.content = editor.text;

          }
  },
  created() {
    // console.log(this.dialogImageUrl);
    getCategoryLists().then((res) => {
      // console.log(res.data);
      if (res.errno === 0) {
        this.getCategoryLists = res.data;
      }
    }),
      getBrandLists({
        page: this.currentPage,
        size: this.pageSize,
      }).then((res) => {
        // console.log(res.data);
        this.getBrandLists = res.data.data;
        this.currentPage = res.data.currentPage;
        this.pageSize = res.data.pageSize;
      });

    //  this.token=localStorage.getItem('token');
  },
};
</script>

<style lang="less" scoped>
.bigbox {
  .el-form {
    padding-left: 40px;
  }
  /deep/ .el-input__inner {
    width: 260px;
  }
  /deep/ .el-textarea__inner {
    width: 260px;
  }
  /* /deep/ .el-upload {
    width: 200px;
    height: 120px;
    line-height: 120px;
  } */

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  /deep/ .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

   // 富文本
  /deep/ .ql-editor{
    height: 600px;
  }
}
</style>
